<template>
  <div class="aui-padded-40">
    <div>
      <p class="aui-font-size-20 aui-padded-b-20">项目地址管理</p>
    </div>
    <div>
      <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="项目名">
          <el-input v-model="formData.name" placeholder="请输入项目名" clearable />
        </el-form-item>
        <el-form-item label="域名">
          <el-input v-model="formData.domain" placeholder="请输入域名" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSeach">搜索</el-button>
        </el-form-item>
        <el-form-item class="aui-pull-right">
          <el-button type="primary" plain @click="dialogVisible = true">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column width="80" label="序号" type="index" align="center"></el-table-column>
      <el-table-column prop="date" label="项目名"></el-table-column>
      <el-table-column prop="date" label="域名"></el-table-column>
      <el-table-column prop="name" label="创建时间" width="180">
      </el-table-column>
      <el-table-column prop="" align="center" label="操作" width="150">
        <template #default="scope">
          <el-button size="mini" @click="handelOpen(scope.row)"> 访问 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="aui-text-center aui-padded-t-20 aui-flex aui-row-center">
      <el-pagination background layout="prev, pager, next" :total="1000" />
    </div>
  </div>
  <!-- 
     <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="30%"
    :before-close="handleClose"
  >
    <span>This is a message</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
   -->

  <el-dialog title="新增/编辑" v-model="dialogVisible" width="600px">
    <div class="aui-padded-l-40 aui-padded-r-40">
      <el-form :model="crateFormData" ref="crateFormDataRef" label-width="100px">
        <el-form-item label="工程名：">
          <el-input v-model="crateFormData.name" placeholder="请输入项目名" clearable />
        </el-form-item>
        <el-form-item label="项目名：">
          <el-input v-model="crateFormData.name" placeholder="请输入项目名" clearable />
        </el-form-item>
        <el-form-item label="域名：">
          <el-input v-model="crateFormData.domain" placeholder="请输入域名" clearable />
        </el-form-item>
        <el-form-item class="">
          <el-button type="primary" plain @click="handleSubmit(crateFormDataRef)">提交</el-button>
        </el-form-item>
      </el-form>
    </div>

  </el-dialog>
</template>
<script setup lang='ts'>

import { ajax } from "./assets/js/axios/index";
import { onMounted, ref, reactive } from 'vue';
import type { FormInstance } from "element-plus";

let crateFormDataRef = ref<FormInstance>();
let formData = reactive({
  name: '',
  domain: '',
  pageNo: 1,
  pageSize: 10,
})
let crateFormData = reactive({
  name: '',
  domain: '',
  id: null
})

let tableData = ref('')
let dialogVisible = ref(true)
/**
* @author 伟健 / 张
* @name 打开网页
*/
let handelOpen = function (row: any) {

  console.log(row);
}
/**
* @author 伟健 / 张
* @name 提交
*/
let handleSubmit = async function (formEl: FormInstance | null) {
  if (!formEl) return false;
  await formEl.validate((valid) => {
    if (valid) {
      ajax.post({
        url: '/domain/createOrUpdate',
        data: { ...crateFormData },
        success: (res) => {
          console.log(res);
        },
        fail: () => { },
      })
    }

  })

}
/**
* @author 伟健 / 张
* @name 搜索
*/
let handleSeach = function () {
  formData.pageNo = 1
  getList()
}


/**
* @author 伟健 / 张
* @name 列表
*/
let getList = function () {

  ajax.post({
    url: '/domain/list',
    data: { ...formData },
    success: (res) => {
      console.log(res);
    },
    fail: () => { },
  })
}

onMounted(() => {
  getList();

})
</script>
<style scoped lang='scss'></style>